<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智慧中枢</title>
    <link rel="stylesheet" href="css/index.css" >
    <link rel="stylesheet" href="css/总览.css">
    <link rel="stylesheet" href="css/2-procurement.css">
    <link rel="stylesheet" href="css/3-planning.css">
    <link rel="stylesheet" href="css/4-inventory.css">
    <link rel="stylesheet" href="css/5-ledger.css">
<!--    添加图标库-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

</head>
<body>
<!--头部的盒子-->
    <header>
        <h1>华能集团供应链智慧中枢</h1>
        <div class="showTime">123</div>

        <!-- 导航栏容器 -->
        <div class="nav-container">
            <!-- 10个导航项，每个都有data-target属性对应内容区块 -->
            <div class="nav-item active" data-target="overview">供应链总览</div>
            <div class="nav-item" data-target="procurement">采购分析</div>
            <div class="nav-item" data-target="planning">计划分析</div>
            <div class="nav-item" data-target="inventory">库存指标</div>
            <div class="nav-item" data-target="ledger">库存台账</div>
            <div class="nav-item" data-target="pricing">物资价格</div>
            <div class="nav-item" data-target="virtual">虚拟库</div>
            <div class="nav-item" data-target="process">采购全流程</div>
            <div class="nav-item" data-target="analysis">全流程经营分析</div>
            <div class="nav-item" data-target="kpi">考核指标</div>
        </div>
    </header>



<!--    页面主体部分-->
<div class="content-container">
    <div class="content-section active" id = "overview">
    <!-- 供应链总览页面 -->
        <!-- 第一行：金额数据 -->
        <div class="stats-row">
            <!-- 年度计划金额卡片 -->
            <div class="stat-card">
                <div class="card-header">
                    <div class="card-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="card-title">2025年度计划金额</div>
                </div>
                <div class="main-value">4209.23<span class="value-unit">亿元</span></div>
                <div class="card-description">全年采购计划总额，较去年增长<span class="trend-indicator trend-up">+8.5%</span></div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 85%"></div>
                </div>
                <div class="card-footer">计划完成率 85%</div>
            </div>

            <!-- 年度采购金额卡片 -->
            <div class="stat-card">
                <div class="card-header">
                    <div class="card-icon">
                        <i class="fas fa-shopping-cart"></i>
                    </div>
                    <div class="card-title">2025年度采购金额</div>
                </div>
                <div class="main-value">1320.59<span class="value-unit">亿元</span></div>
                <div class="card-description">已完成采购总额，占年度计划<span class="trend-indicator trend-up">31.4%</span></div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 31%"></div>
                </div>
                <div class="card-footer">同比增长 12.3%</div>
            </div>

            <!-- 当前库存金额卡片 -->
            <div class="stat-card">
                <div class="card-header">
                    <div class="card-icon">
                        <i class="fas fa-boxes"></i>
                    </div>
                    <div class="card-title">当前库存金额</div>
                </div>
                <div class="main-value">17.41<span class="value-unit">亿元</span></div>
                <div class="card-description">库存总价值，较上月下降<span class="trend-indicator trend-down">-2.1%</span></div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 65%"></div>
                </div>
                <div class="card-footer">库存周转率 5.8次/月</div>
            </div>
        </div>
        <!-- 第二行：专家数据和供应商数据合并 -->
        <div class="center-container">
            <div class="stats-row double-width">
                <!-- 专家数据卡片 -->
                <div class="stat-card wide-card">
                    <div class="card-header">
                        <div class="card-icon">
                            <i class="fas fa-user-tie"></i>
                        </div>
                        <div class="card-title">专家数据</div>
                    </div>
                    <div class="card-content">
                        <div class="main-stats">
                            <div class="main-value">17,783<span class="value-unit">人</span></div>
                            <div class="card-description">专家库总人数，涵盖各领域专业人才</div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 84%"></div>
                            </div>
                            <div class="card-footer">活跃专家占比 84.4%</div>
                        </div>
                        <div class="detail-stats">
                            <ul class="detail-list">
                                <li>
                                    <span class="detail-label">内部专家</span>
                                    <span class="detail-value">14,943人</span>
                                </li>
                                <li>
                                    <span class="detail-label">外部专家</span>
                                    <span class="detail-value">2,840人</span>
                                </li>
                                <li>
                                    <span class="detail-label">屏蔽专家</span>
                                    <span class="detail-value">2,779人</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 供应商数据卡片 -->
                <div class="stat-card wide-card">
                    <div class="card-header">
                        <div class="card-icon">
                            <i class="fas fa-handshake"></i>
                        </div>
                        <div class="card-title">供应商数据</div>
                    </div>
                    <div class="card-content">
                        <div class="main-stats">
                            <div class="main-value">234,225<span class="value-unit">家</span></div>
                            <div class="card-description">供应商总数，涵盖各类物资和服务</div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 48%"></div>
                            </div>
                            <div class="card-footer">优质供应商占比 47.5%</div>
                        </div>
                        <div class="detail-stats">
                            <ul class="detail-list">
                                <li>
                                    <span class="detail-label">正式供应商</span>
                                    <span class="detail-value">111,235家</span>
                                </li>
                                <li>
                                    <span class="detail-label">潜在供应商</span>
                                    <span class="detail-value">122,990家</span>
                                </li>
                                <li>
                                    <span class="detail-label">待审批供应商</span>
                                    <span class="detail-value">0家</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 数据范围选择器 -->
        <div class="data-scope-selector">
            <span class="scope-text">当前默认显示 <span class="highlight-text">【全集团数据】</span>，可选择查看</span>
            <select class="scope-dropdown">
                <option value="all">全集团数据</option>
                <option value="thermal">火电业务数据</option>
                <option value="solar">光伏业务数据</option>
                <option value="wind">风电业务数据</option>
                <option value="hydro">水电业务数据</option>
                <option value="nuclear">核电业务数据</option>
                <option value="coal">煤炭业务数据</option>
                <option value="port">港口业务数据</option>
                <option value="other">其他业务数据</option>
            </select>
        </div>
    </div>

    <!-- 采购分析页面 -->
    <div class="content-section" id="procurement">
<!--        <div class="procurement-container">-->
        <!-- 顶部区域：筛选和数据概览 -->
        <div class="procurement-top-section">
            <!-- 筛选区域 -->
            <div class="procurement-filter-section">
                <div class="procurement-filter-title">
                    <i class="fas fa-filter"></i>数据筛选条件
                </div>
                <div class="procurement-filter-grid">
                    <div class="procurement-filter-group">
                        <label class="procurement-filter-label">采购级别</label>
                        <select class="procurement-filter-select" id="procurement-level">
                            <option value="">全部级别</option>
                            <option value="一级">一级</option>
                            <option value="二级">二级</option>
                        </select>
                    </div>
                    <div class="procurement-filter-group">
                        <label class="procurement-filter-label">采购类型</label>
                        <select class="procurement-filter-select" id="procurement-type">
                            <option value="">全部类型</option>
                            <option value="工程">工程</option>
                            <option value="物资">物资</option>
                            <option value="服务">服务</option>
                        </select>
                    </div>
                    <div class="procurement-filter-group">
                        <label class="procurement-filter-label">企业类型</label>
                        <select class="procurement-filter-select" id="enterprise-type">
                            <option value="">全部类型</option>
                            <option value="生产">生产</option>
                            <option value="基建">基建</option>
                        </select>
                    </div>
                    <div class="procurement-filter-group">
                        <label class="procurement-filter-label">采购平台</label>
                        <select class="procurement-filter-select" id="procurement-platform">
                            <option value="">全部平台</option>
                            <option value="华能商城">华能商城</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>
                    <div class="procurement-filter-group">
                        <label class="procurement-filter-label">采购方式</label>
                        <select class="procurement-filter-select" id="procurement-method">
                            <option value="">全部方式</option>
                            <optgroup label="招标">
                                <option value="公开招标">公开招标</option>
                                <option value="邀请招标">邀请招标</option>
                            </optgroup>
                            <optgroup label="非招标">
                                <option value="寻比采购">寻比采购</option>
                                <option value="谈判采购">谈判采购</option>
                                <option value="竞价采购">竞价采购</option>
                                <option value="直接采购">直接采购</option>
                            </optgroup>
                        </select>
                    </div>
                    <div class="procurement-filter-group">
                        <label class="procurement-filter-label">年份</label>
                        <select class="procurement-filter-select" id="year-select">
                            <option value="2021">2021年</option>
                            <option value="2022">2022年</option>
                            <option value="2023">2023年</option>
                            <option value="2024">2024年</option>
                            <option value="2025" selected>2025年</option>
                        </select>
                    </div>
                </div>
                <div class="procurement-filter-actions">
                    <button class="procurement-query-btn" id="procurement-query-data">
                        <i class="fas fa-search"></i> 查询采购数据
                    </button>
                </div>
            </div>

            <!-- 数据概览 - 2x2布局 -->
            <div class="procurement-data-overview">
                <div class="procurement-overview-card">
                    <div class="procurement-overview-title">采购项目数</div>
                    <div class="procurement-overview-value">--<span class="procurement-overview-unit">项</span></div>
                </div>
                <div class="procurement-overview-card">
                    <div class="procurement-overview-title">采购金额</div>
                    <div class="procurement-overview-value">--<span class="procurement-overview-unit">万元</span></div>
                </div>
                <div class="procurement-overview-card">
                    <div class="procurement-overview-title">概算金额</div>
                    <div class="procurement-overview-value">--<span class="procurement-overview-unit">万元</span></div>
                </div>
                <div class="procurement-overview-card">
                    <div class="procurement-overview-title">节资率</div>
                    <div class="procurement-overview-value">--<span class="procurement-overview-unit">%</span></div>
                </div>
            </div>
        </div>

        <!-- 结果描述 -->
        <div class="procurement-result-description" id="procurement-result-description">
            请选择筛选条件后点击"查询采购数据"按钮
        </div>

        <!-- 表格区域 -->
        <div class="procurement-table-section">
            <!-- 表1：二级单位采购数据 -->
            <div class="procurement-table-container">
                <div class="procurement-table-header">
                    <div class="procurement-table-title">2025年二级单位采购数据（万元）</div>
                    <div class="procurement-table-tabs">
                        <button class="procurement-tab-btn active" data-tab="bid">招标采购情况</button>
                        <button class="procurement-tab-btn" data-tab="non-bid">非招标情况</button>
                    </div>
                </div>

                <!-- 招标采购表格 -->
                <table class="procurement-data-table procurement-bid-table active">
                    <thead>
                    <tr>
                        <th>二级单位</th>
                        <th>招标采购金额</th>
                        <th>公开招标金额</th>
                        <th>邀请招标金额</th>
                        <th>采购总金额</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>华北</td>
                        <td>76,220.70</td>
                        <td>76,220.70</td>
                        <td>0.00</td>
                        <td>97,457.12</td>
                    </tr>
                    <tr>
                        <td>东北</td>
                        <td>50,134.73</td>
                        <td>50,114.49</td>
                        <td>20.25</td>
                        <td>87,563.37</td>
                    </tr>
                    <tr>
                        <td>华东</td>
                        <td>45,636.18</td>
                        <td>45,636.18</td>
                        <td>0.00</td>
                        <td>111,558.55</td>
                    </tr>
                    <tr>
                        <td>华中</td>
                        <td>19,558.54</td>
                        <td>19,558.54</td>
                        <td>0.00</td>
                        <td>36,247.98</td>
                    </tr>
                    <tr>
                        <td>南方</td>
                        <td>91,350.18</td>
                        <td>91,350.18</td>
                        <td>0.00</td>
                        <td>117,956.45</td>
                    </tr>
                    <tr>
                        <td>河北</td>
                        <td>304,975.64</td>
                        <td>304,975.64</td>
                        <td>0.00</td>
                        <td>338,536.75</td>
                    </tr>
                    <tr>
                        <td>山西</td>
                        <td>110,323.02</td>
                        <td>110,214.43</td>
                        <td>108.59</td>
                        <td>125,995.66</td>
                    </tr>
                    </tbody>
                </table>

                <!-- 非招标采购表格 -->
                <table class="procurement-data-table procurement-non-bid-table">
                    <thead>
                    <tr>
                        <th style="text-align: center;">二级单位</th>
                        <th style="text-align: center;">非招标采购<br>金额</th>
                        <th style="text-align: center;">询价采购<br>金额</th>
                        <th style="text-align: center;">直接采购<br>金额</th>
                        <th style="text-align: center;">谈判采购<br>金额</th>
                        <th style="text-align: center;">竞价采购<br>金额</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>华北</td>
                        <td>21,236.41</td>
                        <td>6,178.69</td>
                        <td>10,159.72</td>
                        <td>4,898.00</td>
                        <td>0.00</td>
                    </tr>
                    <tr>
                        <td>东北</td>
                        <td>37,428.63</td>
                        <td>17,088.33</td>
                        <td>13,139.56</td>
                        <td>7,200.74</td>
                        <td>0.00</td>
                    </tr>
                    <tr>
                        <td>华东</td>
                        <td>65,922.36</td>
                        <td>24,042.82</td>
                        <td>37,650.32</td>
                        <td>4,229.22</td>
                        <td>0.00</td>
                    </tr>
                    <tr>
                        <td>华中</td>
                        <td>16,689.44</td>
                        <td>7,938.25</td>
                        <td>5,911.44</td>
                        <td>2,839.74</td>
                        <td>0.00</td>
                    </tr>
                    <tr>
                        <td>南方</td>
                        <td>26,606.28</td>
                        <td>10,425.86</td>
                        <td>11,318.97</td>
                        <td>4,861.45</td>
                        <td>0.00</td>
                    </tr>
                    <tr>
                        <td>河北</td>
                        <td>33,561.11</td>
                        <td>9,836.22</td>
                        <td>15,345.13</td>
                        <td>8,379.75</td>
                        <td>0.00</td>
                    </tr>
                    <tr>
                        <td>山西</td>
                        <td>15,633.81</td>
                        <td>5,691.99</td>
                        <td>4,511.61</td>
                        <td>5,430.21</td>
                        <td>0.00</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!-- 表2：2025年二级单位数据 -->
            <div class="procurement-table-container">
                <div class="procurement-table-header">
                    <div class="procurement-table-title">2025年二级单位数据</div>
                    <div class="procurement-table-tabs" style="visibility: hidden;">
                        <!-- 空的标签容器用于占位 -->
                    </div>
                </div>
                <table class="procurement-data-table" id="procurement-detail-table">
                    <thead>
                    <tr>
                        <th style="text-align: center;">二级单位</th>
                        <th style="text-align: center;">框架协议<br>项目数</th>
                        <th style="text-align: center;">框架协议金额<br>(万元)</th>
                        <th style="text-align: center;">华能商城<br>项目数</th>
                        <th style="text-align: center;">华能商城金额<br>(万元)</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>华北</td>
                        <td>165</td>
                        <td>2,987.93</td>
                        <td>2,680</td>
                        <td>13,558.50</td>
                    </tr>
                    <tr>
                        <td>东北</td>
                        <td>152</td>
                        <td>4,639.75</td>
                        <td>2,895</td>
                        <td>13,392.13</td>
                    </tr>
                    <tr>
                        <td>华东</td>
                        <td>59</td>
                        <td>2,161.19</td>
                        <td>2,541</td>
                        <td>22,350.06</td>
                    </tr>
                    <tr>
                        <td>华中</td>
                        <td>152</td>
                        <td>3,595.98</td>
                        <td>2,088</td>
                        <td>9,717.09</td>
                    </tr>
                    <tr>
                        <td>南方</td>
                        <td>153</td>
                        <td>2,754.10</td>
                        <td>1,951</td>
                        <td>24,336.90</td>
                    </tr>
                    <tr>
                        <td>河北</td>
                        <td>16</td>
                        <td>1,218.66</td>
                        <td>1,972</td>
                        <td>115,346.15</td>
                    </tr>
                    <tr>
                        <td>山西</td>
                        <td>58</td>
                        <td>3,502.37</td>
                        <td>1,835</td>
                        <td>31,128.33</td>
                    </tr>
                    <tr>
                        <td>吉林</td>
                        <td>13</td>
                        <td>1,466.67</td>
                        <td>1,849</td>
                        <td>48,689.72</td>
                    </tr>
                    <tr>
                        <td>黑龙江</td>
                        <td>163</td>
                        <td>2,711.88</td>
                        <td>2,213</td>
                        <td>26,485.48</td>
                    </tr>
                    <tr>
                        <td>浙江</td>
                        <td>134</td>
                        <td>5,889.95</td>
                        <td>1,868</td>
                        <td>18,216.11</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 图表区域 - 12个图表 -->
        <div class="procurement-charts-section">
            <!-- 基础统计图表 -->
            <div class="procurement-chart-container">
                <div class="procurement-chart-title">近三年采购数据</div>
<!--                <div class="procurement-chart-placeholder">近三年采购总额、项目数对比分析</div>-->
                <div class="procurement-chart1"></div>
                <div class="procurement-chart-footer"></div>
            </div>
            <div class="procurement-chart-container">
                <div class="procurement-chart-title">连续12个月采购数据</div>
                <div class="procurement-chart2">月度采购金额趋势分析</div>
                <div class="procurement-chart-footer"></div>
            </div>
            <div class="procurement-chart-container">
                <div class="procurement-chart-title">2025年采购方式</div>
                <div class="procurement-chart3">各类采购方式金额分布</div>
                <div class="procurement-chart-footer"></div>
            </div>
            <div class="procurement-chart-container">
                <div class="procurement-chart-title">2025年采购项目</div>
                <div class="procurement-chart4">主要采购品类金额分布</div>
                <div class="procurement-chart-footer"></div>
            </div>

            <!-- 采购效率指标图表 -->
            <div class="procurement-chart-container">
                <div class="procurement-chart-title">招标采购率</div>
                <div class="procurement-chart5">招标采购金额占比分析</div>
                <div class="procurement-chart-footer"></div>
            </div>
            <div class="procurement-chart-container">
                <div class="procurement-chart-title">公开招标率</div>
                <div class="procurement-chart6">公开招标金额占比分析</div>
                <div class="procurement-chart-footer"></div>
            </div>
            <div class="procurement-chart-container">
                <div class="procurement-chart-title">采购节资率</div>
                <div class="procurement-chart7">节资率变化趋势分析</div>
                <div class="procurement-chart-footer"></div>
            </div>
            <div class="procurement-chart-container">
                <div class="procurement-chart-title">全流程线上采购率</div>
                <div class="procurement-chart8">线上采购占比分析</div>
                <div class="procurement-chart-footer"></div>
            </div>

            <!-- 集采数据图表 -->
            <div class="procurement-chart-container">
                <div class="procurement-chart-title">一级集采近一年数据</div>
                <div class="procurement-chart9">一级集中采购执行情况</div>
                <div class="procurement-chart-footer"></div>
            </div>
            <div class="procurement-chart-container">
                <div class="procurement-chart-title">二级集采近一年数据</div>
                <div class="procurement-chart10">二级集中采购执行情况</div>
                <div class="procurement-chart-footer"></div>
            </div>
            <div class="procurement-chart-container">
                <div class="procurement-chart-title">华能商城连续12个月采购数据</div>
                <div class="procurement-chart11">商城采购月度趋势</div>
                <div class="procurement-chart-footer"></div>
            </div>
            <div class="procurement-chart-container">
                <div class="procurement-chart-title">框架协议连续12个月采购数据</div>
                <div class="procurement-chart12">框架协议采购执行分析</div>
                <div class="procurement-chart-footer"></div>
            </div>
        </div>
    </div>


    <!-- 计划分析页面 -->
    <div class="content-section" id="planning">
        <div class="planning-container">
            <!-- 第一部分：数据展示块 -->
            <div class="planning-stats-section">
                <div class="planning-stats-row">
                    <!-- 第一组：一级采购计划 -->
                    <div class="planning-stat-group">
                        <div class="planning-group-title">一级采购计划</div>

                        <div class="planning-stat-card">
                            <div class="planning-card-header">
                                <div class="planning-card-icon">
                                    <i class="fas fa-chart-line"></i>
                                </div>
                                <div class="planning-card-title">项目数</div>
                            </div>
                            <div class="planning-main-value">1,245<span class="planning-value-unit">项</span></div>
                            <div class="planning-card-description">一级采购计划项目总数</div>
                            <div class="planning-progress-bar">
                                <div class="planning-progress-fill" style="width: 78%"></div>
                            </div>
                            <div class="planning-card-footer">完成率 78%</div>
                        </div>

                        <div class="planning-stat-card">
                            <div class="planning-card-header">
                                <div class="planning-card-icon">
                                    <i class="fas fa-shopping-cart"></i>
                                </div>
                                <div class="planning-card-title">金额</div>
                            </div>
                            <div class="planning-main-value">892.36<span class="planning-value-unit">亿元</span></div>
                            <div class="planning-card-description">一级采购计划总金额</div>
                            <div class="planning-progress-bar">
                                <div class="planning-progress-fill" style="width: 65%"></div>
                            </div>
                            <div class="planning-card-footer">同比增长 7.2%</div>
                        </div>
                    </div>

                    <!-- 第二组：二级采购计划 -->
                    <div class="planning-stat-group">
                        <div class="planning-group-title">二级采购计划</div>

                        <div class="planning-stat-card">
                            <div class="planning-card-header">
                                <div class="planning-card-icon">
                                    <i class="fas fa-chart-bar"></i>
                                </div>
                                <div class="planning-card-title">项目数</div>
                            </div>
                            <div class="planning-main-value">3,587<span class="planning-value-unit">项</span></div>
                            <div class="planning-card-description">二级采购计划项目总数</div>
                            <div class="planning-progress-bar">
                                <div class="planning-progress-fill" style="width: 82%"></div>
                            </div>
                            <div class="planning-card-footer">完成率 82%</div>
                        </div>

                        <div class="planning-stat-card">
                            <div class="planning-card-header">
                                <div class="planning-card-icon">
                                    <i class="fas fa-money-bill-wave"></i>
                                </div>
                                <div class="planning-card-title">金额</div>
                            </div>
                            <div class="planning-main-value">1,567.89<span class="planning-value-unit">亿元</span></div>
                            <div class="planning-card-description">二级采购计划总金额</div>
                            <div class="planning-progress-bar">
                                <div class="planning-progress-fill" style="width: 71%"></div>
                            </div>
                            <div class="planning-card-footer">同比增长 9.5%</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第二部分：图表区域 -->
            <div class="planning-charts-row">
                <div class="planning-chart-container">
                    <div class="planning-chart-title">近三年计划数据</div>
                    <div class="planning-chart-placeholder">柱状图区域 - 近三年采购计划对比分析</div>
                </div>
                <div class="planning-chart-container">
                    <div class="planning-chart-title">连续12个月计划数据</div>
                    <div class="planning-chart-placeholder">折线图区域 - 月度采购计划趋势分析</div>
                </div>
            </div>

            <!-- 第三部分：多图表区域 -->
            <div class="planning-multi-charts-row">
                <div class="planning-multi-chart-container">
                    <div class="planning-multi-chart-title">采购品类分布</div>
                    <div class="planning-multi-chart-content">
                        <div class="planning-chart-half">
                            <div class="planning-half-chart-title">一级采购品类分布</div>
                            <div class="planning-half-chart-placeholder">饼图区域 - 一级采购品类占比</div>
                        </div>
                        <div class="planning-chart-divider"></div>
                        <div class="planning-chart-half">
                            <div class="planning-half-chart-title">二级采购品类分布</div>
                            <div class="planning-half-chart-placeholder">饼图区域 - 二级采购品类占比</div>
                        </div>
                    </div>
                </div>

                <div class="planning-multi-chart-container">
                    <div class="planning-multi-chart-title">采购方式分析</div>
                    <div class="planning-multi-chart-content">
                        <div class="planning-chart-half">
                            <div class="planning-half-chart-title">招标方式分布</div>
                            <div class="planning-half-chart-placeholder">饼图区域 - 招标方式占比</div>
                        </div>
                        <div class="planning-chart-divider"></div>
                        <div class="planning-chart-half">
                            <div class="planning-half-chart-title">非招标方式分布</div>
                            <div class="planning-half-chart-placeholder">饼图区域 - 非招标方式占比</div>
                        </div>
                    </div>
                </div>

                <div class="planning-multi-chart-container">
                    <div class="planning-multi-chart-title">区域采购分析</div>
                    <div class="planning-multi-chart-content">
                        <div class="planning-chart-half">
                            <div class="planning-half-chart-title">区域采购金额分布</div>
                            <div class="planning-half-chart-placeholder">饼图区域 - 区域采购金额占比</div>
                        </div>
                        <div class="planning-chart-divider"></div>
                        <div class="planning-chart-half">
                            <div class="planning-half-chart-title">区域采购项目分布</div>
                            <div class="planning-half-chart-placeholder">饼图区域 - 区域采购项目占比</div>
                        </div>
                    </div>
                </div>

                <div class="planning-multi-chart-container">
                    <div class="planning-multi-chart-title">时间分布分析</div>
                    <div class="planning-multi-chart-content">
                        <div class="planning-chart-half">
                            <div class="planning-half-chart-title">季度采购分布</div>
                            <div class="planning-half-chart-placeholder">饼图区域 - 季度采购占比</div>
                        </div>
                        <div class="planning-chart-divider"></div>
                        <div class="planning-chart-half">
                            <div class="planning-half-chart-title">月度采购分布</div>
                            <div class="planning-half-chart-placeholder">饼图区域 - 月度采购占比</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 库存指标页面 -->
    <div class="content-section" id="inventory">
        <div class="inventory-container">
            <!-- 左列 - 4个图表 -->
            <div class="chart-column">
                <div class="inventory-chart-container">
                    <div class="inventory-chart-title">近三年库存数据</div>
                    <div class="inventory-chart-left1">图表区域 - 近三年采购数据对比分析</div>
                    <div class="inventory-chart-footer"></div>
                </div>
                <div class="inventory-chart-container">
                    <div class="inventory-chart-title">连续12个月库存数据</div>
                    <div class="inventory-chart-left2">图表区域 - 月度采购金额趋势分析</div>
                    <div class="inventory-chart-footer"></div>
                </div>
                <div class="inventory-chart-container">
                    <div class="inventory-chart-title">各行业连续12个月库存数据</div>
                    <div class="inventory-chart-left3">HERE</div>
                    <div class="inventory-chart-footer"></div>
                </div>
                <div class="inventory-chart-container">
                    <div class="inventory-chart-title">2025年库存数据</div>
                    <div class="inventory-chart-left4">图表区域 - 2025年库存分布分析</div>
                    <div class="inventory-chart-footer"></div>
                </div>
            </div>

            <!-- 中间列 - 数据展示和表格 -->
            <div class="center-column">
                <!-- 第一行：三个数据展示块 -->
                <div class="inventory-stats-row">
                    <!-- 2025年库存数据卡片 -->
                    <div class="inventory-stat-card">
                        <div class="inventory-card-header">
                            <div class="inventory-card-icon">
                                <i class="fas fa-industry"></i>
                            </div>
                            <div class="inventory-card-title">2025年库存数据</div>
                        </div>
                        <div class="inventory-card-description">
                            <div>发电企业单位库存（含核电）：<span class="inventory-main-value">4.79</span><span class="inventory-value-unit">元/千瓦</span></div>
                            <div>发电企业单位库存（不含核电）：<span class="inventory-main-value">4.26</span><span class="inventory-value-unit">元/千瓦</span></div>
                            <div>库存周转率：<span class="inventory-main-value">5.18</span><span class="inventory-value-unit">次</span></div>
                        </div>
                    </div>

                    <!-- 2025年废旧物资数据卡片 -->
                    <div class="inventory-stat-card">
                        <div class="inventory-card-header">
                            <div class="inventory-card-icon">
                                <i class="fas fa-recycle"></i>
                            </div>
                            <div class="inventory-card-title">2025年废旧物资数据</div>
                        </div>
                        <div class="inventory-card-description">
                            <div>处置底价：<span class="inventory-main-value">12,123.4</span><span class="inventory-value-unit">万元</span></div>
                            <div>溢价金额：<span class="inventory-main-value">1,629.95</span><span class="inventory-value-unit">万元</span></div>
                            <div>处置金额：<span class="inventory-main-value">13,753.35</span><span class="inventory-value-unit">万元</span></div>
                            <div>溢价率：<span class="inventory-main-value">13.44</span><span class="inventory-value-unit">%</span></div>
                        </div>
                    </div>

                    <!-- 2025年闲置物资数据卡片 -->
                    <div class="inventory-stat-card">
                        <div class="inventory-card-header">
                            <div class="inventory-card-icon">
                                <i class="fas fa-warehouse"></i>
                            </div>
                            <div class="inventory-card-title">2025年闲置物资数据</div>
                        </div>
                        <div class="inventory-card-description">
                            <div>调配金额：<span class="inventory-main-value">305.67</span><span class="inventory-value-unit">万元</span></div>
                        </div>
                    </div>
                </div>


                <!-- 第二行：两个表格（上下结构） -->
                <div class="inventory-table-section">
                    <div class="inventory-table-container">
                        <div class="inventory-table-header">
                            <div class="inventory-table-title">2025年二级单位指标（发电）</div>
                        </div>
                        <table class="inventory-data-table">
                            <thead>
                            <tr>
                                <th>二级单位</th>
                                <th>库存金额(万元)</th>
                                <th>单位库存(元/千瓦)</th>
                                <th>库存周转率(次)</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>华北</td>
                                <td>4191.58</td>
                                <td>8.84</td>
                                <td>3.88</td>
                            </tr>
                            <tr>
                                <td>东北</td>
                                <td>3351.27</td>
                                <td>5.00</td>
                                <td>5.03</td>
                            </tr>
                            <tr>
                                <td>华东</td>
                                <td>3267.11</td>
                                <td>5.24</td>
                                <td>3.55</td>
                            </tr>
                            <tr>
                                <td>华中</td>
                                <td>847.56</td>
                                <td>1.51</td>
                                <td>12.46</td>
                            </tr>
                            <tr>
                                <td>南方</td>
                                <td>3036.59</td>
                                <td>4.26</td>
                                <td>8.45</td>
                            </tr>
                            <tr>
                                <td>河北</td>
                                <td>3918.28</td>
                                <td>6.29</td>
                                <td>8.67</td>
                            </tr>
                            <tr>
                                <td>山西</td>
                                <td>2663.19</td>
                                <td>4.26</td>
                                <td>2.47</td>
                            </tr>
                            <tr>
                                <td>吉林</td>
                                <td>1386.56</td>
                                <td>2.68</td>
                                <td>8.45</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="inventory-table-container">
                        <div class="inventory-table-header">
                            <div class="inventory-table-title">2025年二级单位指标（煤炭）</div>
                        </div>
                        <table class="inventory-data-table">
                            <thead>
                            <tr>
                                <th>二级单位</th>
                                <th>库存金额(万元)</th>
                                <th>单位库存(元/吨)</th>
                                <th>库存周转率(次)</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>总计</td>
                                <td>31228.4</td>
                                <td>0</td>
                                <td>9.08</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 右列 - 4个图表 -->
            <div class="chart-column">
                <div class="inventory-chart-container">
                    <div class="inventory-chart-title">近三年库存周转率</div>
                    <div class="inventory-chart-right1">图表区域 - 库存周转率年度趋势</div>
                    <div class="inventory-chart-footer"></div>
                </div>
                <div class="inventory-chart-container">
                    <div class="inventory-chart-title">连续12个月库存周转率</div>
                    <div class="inventory-chart-right2">图表区域 - 月度库存周转率变化</div>
                    <div class="inventory-chart-footer"></div>
                </div>
                <div class="inventory-chart-container">
                    <div class="inventory-chart-title">2025年库存周转率</div>
                    <div class="inventory-chart-right3">图表区域 - 2025年周转率分布</div>
                    <div class="inventory-chart-footer"></div>
                </div>
                <div class="inventory-chart-container">
                    <div class="inventory-chart-title">近三年闲废物资统计</div>
                    <div class="inventory-chart-right4">图表区域 - 闲废物资趋势分析</div>
                    <div class="inventory-chart-footer"></div>
                </div>
            </div>
        </div>
    </div>


    <!-- 库存台账页面 -->
<!--    <div class="content-section" id="ledger">-->
<!--        <h2 class="section-title">库存台账</h2>-->
<!--        <div class="chart-placeholder" style="height: 400px;">库存台账可视化图表</div>-->
<!--    </div>-->

    <!-- 库存台账页面 -->
    <div class="content-section" id="ledger">
        <div class="panel">
            <div class="ledger-container">
                <div class="ledger-header">
                    <div class="ledger-title">集团公司物资库存台账</div>
                    <div class="ledger-date">数据更新日期：10月21日</div>
                </div>
                <table class="ledger-data-table">
                    <thead>
                    <tr>
                        <th>行业类型</th>
                        <th>当期装机容量<br>(万千瓦或万吨)</th>
                        <th>本年期初库存金额<br>(万元)</th>
                        <th>本年累计入库金额<br>(万元)</th>
                        <th>本年累计出库金额<br>(万元)</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>火电</td>
                        <td>14728.35</td>
                        <td>85958.12</td>
                        <td>526798.46</td>
                        <td>510848.24</td>
                    </tr>
                    <tr>
                        <td>光伏</td>
                        <td>6162.89</td>
                        <td>1151.95</td>
                        <td>2784.08</td>
                        <td>2450.61</td>
                    </tr>
                    <tr>
                        <td>风电</td>
                        <td>4975.07</td>
                        <td>8132.59</td>
                        <td>65059.73</td>
                        <td>59670.48</td>
                    </tr>
                    <tr>
                        <td>水电</td>
                        <td>2956.22</td>
                        <td>4090.88</td>
                        <td>12407.98</td>
                        <td>10515.49</td>
                    </tr>
                    <tr>
                        <td>核电</td>
                        <td>20.00</td>
                        <td>13876.52</td>
                        <td>7862.95</td>
                        <td>6371.17</td>
                    </tr>
                    <tr class="highlight-row">
                        <td>小计(不含核电)</td>
                        <td>28822.53</td>
                        <td>99333.54</td>
                        <td>607050.24</td>
                        <td>583484.82</td>
                    </tr>
                    <tr class="highlight-row">
                        <td>小计(含核电)</td>
                        <td>28842.53</td>
                        <td>113210.06</td>
                        <td>614913.19</td>
                        <td>589855.99</td>
                    </tr>
                    <tr>
                        <td>其他</td>
                        <td>-</td>
                        <td>630.47</td>
                        <td>7918.12</td>
                        <td>7074.62</td>
                    </tr>
                    <tr>
                        <td>港口</td>
                        <td>-</td>
                        <td>3112.20</td>
                        <td>4750.80</td>
                        <td>4454.05</td>
                    </tr>
                    <tr>
                        <td>煤炭</td>
                        <td>11680.00</td>
                        <td>26759.12</td>
                        <td>273886.40</td>
                        <td>271282.72</td>
                    </tr>
                    <tr class="total-row">
                        <td>总计</td>
                        <td>40522.53</td>
                        <td>143711.86</td>
                        <td>901468.51</td>
                        <td>872667.38</td>
                    </tr>
                    </tbody>
                </table>
                <div class="ledger-footer"></div>
            </div>
        </div>
    </div>

    <!-- 物资价格页面 -->
    <div class="content-section" id="pricing">
        <h2 class="section-title">物资价格</h2>
        <div class="chart-placeholder" style="height: 400px;">物资价格可视化图表</div>
    </div>

    <!-- 虚拟库页面 -->
    <div class="content-section" id="virtual">
        <section class="mainbox">
        <div class="column">
            <div class="panel bar">
                <h2>近三年采购情况统计</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>

            <div class="panel line">
                <h2>近6个月各行业库存金额</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>

            <div class="panel pie">
                <h2>2025年各行业采购计划金额</h2>
                <div class="chart">图表</div>
                <div class="panel-footer"></div>
            </div>
        </div>
        <div class="column">
            <!--            no模块制作-->
            <div class="no">
                <div class="no-hd">
                    <ul>
                        <li>169,593项</li>
                        <li>1,272.01亿元</li>
                        <li>1550.71亿元</li>
                        <li>15.48%</li>
                    </ul>
                </div>
                <div class="no-bd">
                    <ul>
                        <li>采购项目数</li>
                        <li>采购金额</li>
                        <li>概算金额</li>
                        <li>节资率</li>
                    </ul>
                </div>
            </div>
            <!--            地图模块-->
            <div class="map">
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
                <div class="chart">库存分布分类情况</div>
            </div>
        </div>
        <div class="column">
            <div class="panel bar2">
                <h2>2025年各分公司公开招标采购金额</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>

            <div class="panel line2">
                <h2>近12个月集中采购金额</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>

            <div class="panel pie2">
                <h2>2025年各行业采购计划项目数</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
        </div>
    </section>
    </div>

    <!-- 采购全流程页面 -->
    <div class="content-section" id="process">
        <h2 class="section-title">采购全流程</h2>
        <div class="chart-placeholder" style="height: 400px;">采购全流程</div>
    </div>

    <!-- 全流程经营分析页面 -->
    <div class="content-section" id="analysis">
        <h2 class="section-title">全流程经营分析</h2>
        <div class="chart-placeholder" style="height: 400px;">全流程经营分析可视化图表</div>
    </div>

    <!-- 考核指标页面 -->
    <div class="content-section" id="kpi">
        <h2 class="section-title">考核指标</h2>
        <div class="chart-placeholder" style="height: 400px;">考核指标可视化图表</div>
    </div>

</div>


<!-- %页脚 -->
<footer>
    中国华能集团 © 2025 | 数据更新时间: 2025-10-19 14:30
</footer>

<script>
    <!--        时间显示功能脚本-->
    // 定义定时器变量
    var t = null;

    // 启动定时器：1秒后执行time函数
    t = setTimeout(time, 1000); // 开始运行时间显示功能

    // 时间显示主函数
    function time() {
        clearTimeout(t); // 清除之前的定时器，避免重复堆积

        // 创建日期对象，获取当前时间
        dt = new Date();

        // 获取时间各部分
        var y = dt.getFullYear();        // 获取完整年份（4位数）
        var mt = dt.getMonth() + 1;      // 获取月份（0-11，需要+1得到实际月份）
        var day = dt.getDate();          // 获取日期（1-31）
        var h = dt.getHours();           // 获取小时（0-23）
        var m = dt.getMinutes();         // 获取分钟（0-59）
        var s = dt.getSeconds();         // 获取秒钟（0-59）

        // 将时间显示在页面上，格式：当前时间：2020年3月17日-0时54分14秒
        document.querySelector(".showTime").innerHTML =
            '当前时间：' + y + "年" + mt + "月" + day + "日-" + h + "时" + m + "分" + s + "秒";

        // 重新设置定时器，实现每秒更新
        t = setTimeout(time, 1000); // 设定定时器，循环运行时间更新
    }



    // 页面切换功能 - 增强版（解决图表显示问题）
    document.addEventListener('DOMContentLoaded', function() {
        const navItems = document.querySelectorAll('.nav-item');
        const contentSections = document.querySelectorAll('.content-section');

        navItems.forEach(item => {
            item.addEventListener('click', function() {
                // 移除所有导航项的活动状态
                navItems.forEach(nav => nav.classList.remove('active'));
                // 移除所有内容区块的活动状态
                contentSections.forEach(section => section.classList.remove('active'));

                // 为当前点击的导航项添加活动状态
                this.classList.add('active');
                // 获取目标内容区块的ID
                const targetId = this.getAttribute('data-target');
                const targetSection = document.getElementById(targetId);

                // 显示对应的内容区块
                targetSection.classList.add('active');

                // 新增：切换到对应页面后初始化图表
                setTimeout(() => {
                    initChartsForSection(targetId);
                }, 100); // 等待DOM更新完成

                // 新增：切换页面时自动滚动到顶部
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        });

        // 初始化首页图表
        setTimeout(() => {
            initChartsForSection('overview');
        }, 500);
    });

    // 按页面初始化图表
    function initChartsForSection(sectionId) {
        const section = document.getElementById(sectionId);
        if (!section) return;

        setTimeout(() => {
            const charts = section.querySelectorAll('.chart');
            charts.forEach(chartDom => {
                // 如果已经有ECharts实例，重新调整尺寸
                let chartInstance = echarts.getInstanceByDom(chartDom);
                if (chartInstance) {
                    chartInstance.resize();
                } else {
                    // 如果没有实例，根据容器类型初始化图表
                    initSingleChart(chartDom, sectionId);
                }
            });


            // 特别处理库存指标页面的图表
            if (sectionId === 'inventory') {
                if (typeof initInventoryChartsOnShow === 'function') {
                    initInventoryChartsOnShow();
                }
            }

            // 特别处理采购分析页面的图表
            if (sectionId === 'procurement') {
                if (typeof initProcurementChartsOnShow === 'function') {
                    initProcurementChartsOnShow();
                }
            }

            // 特别处理地图
            if (sectionId === 'process') {
                initMapCharts();
            }

            // 特别处理采购分析页面的图表
            if (sectionId === 'procurement') {
                if (typeof initProcurementChartsOnShow === 'function') {
                    initProcurementChartsOnShow();
                }
            }

        }, 150);
    }

    // 初始化单个图表
    function initSingleChart(chartDom, sectionId) {
        // 确保容器可见且有尺寸
        if (chartDom.offsetWidth === 0 || chartDom.offsetHeight === 0) {
            console.log('图表容器尺寸为0，延迟初始化:', chartDom);
            setTimeout(() => initSingleChart(chartDom, sectionId), 100);
            return;
        }

        const chartInstance = echarts.init(chartDom);

        // 根据页面和图表类型设置不同的配置
        const option = getChartOption(chartDom, sectionId);
        if (option) {
            chartInstance.setOption(option);
            // 确保图表正确渲染
            setTimeout(() => chartInstance.resize(), 50);
        }
    }

    // 初始化地图相关图表
    function initMapCharts() {
        const mapChart = document.querySelector('#inventory .map .chart');
        if (mapChart && mapChart.offsetWidth > 0) {
            let mapInstance = echarts.getInstanceByDom(mapChart) || echarts.init(mapChart);
            // 设置地图配置
            const mapOption = {
                title: {
                    text: '库存分布分类情况',
                    textStyle: { color: '#fff', fontSize: 14 }
                },
                series: [{
                    type: 'map',
                    map: 'china',
                    label: { show: true },
                    itemStyle: { areaColor: '#1a2d5a' },
                    emphasis: { itemStyle: { areaColor: '#4fc3f7' } }
                }]
            };
            mapInstance.setOption(mapOption);
            mapInstance.resize();
        }
    }


    // 获取图表配置（根据您的实际配置修改）
    function getChartOption(chartDom, sectionId) {
        const panel = chartDom.closest('.panel');
        const title = panel ? panel.querySelector('h2').textContent : '';

        // 根据标题返回不同的配置
        if (title.includes('近三年采购情况统计')) {
            return {
                xAxis: {
                    type: 'category',
                    data: ['2023', '2024', '2025'],
                    axisLabel: { color: '#fff' }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: { color: '#fff' }
                },
                series: [{
                    type: 'bar',
                    data: [120, 200, 150],
                    itemStyle: { color: '#4fc3f7' }
                }]
            };
        }
        // 添加其他图表的配置...

        return {
            title: { text: '图表', textStyle: { color: '#fff' } },
            xAxis: { type: 'category', data: ['A', 'B', 'C'], axisLabel: { color: '#fff' } },
            yAxis: { type: 'value', axisLabel: { color: '#fff' } },
            series: [{ type: 'bar', data: [10, 20, 30], itemStyle: { color: '#4fc3f7' } }]
        };
    }

    // 添加卡片进入动画
    function animateCards() {
        const cards = document.querySelectorAll('.stat-card');
        cards.forEach((card, index) => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';

            setTimeout(() => {
                card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, index * 100);
        });
    }

    // 初始加载时执行动画
    document.addEventListener('DOMContentLoaded', function() {
        animateCards();

        // 监听页面切换，当切换到总览页面时执行动画
        const navItems = document.querySelectorAll('.nav-item');
        navItems.forEach(item => {
            item.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                if (targetId === 'overview') {
                    setTimeout(animateCards, 300);
                }
            });
        });
    });

    // 监听窗口大小变化，自动调整所有可见图表
    window.addEventListener('resize', function() {
        const visibleCharts = document.querySelectorAll('.content-section.active .chart');
        visibleCharts.forEach(chartDom => {
            const chartInstance = echarts.getInstanceByDom(chartDom);
            if (chartInstance) {
                setTimeout(() => {
                    chartInstance.resize();
                }, 50);
            }
        });
    });




</script>


    <script src='js/flexible.js'></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/index.js"></script>
    <script src="js/procurement.js"></script>
    <script src="js/china.js"></script>
    <script src="js/inventory.js"></script>


</body>
</html>